<template>
	<view>
		<view class="div">
			<image src="../../static/school_logo.png" class="schoolImg"></image>
			<view class="team_name">计算机一班</view>
			<view class="student_detail">姓名<text class="star">*</text><text class="student_name">张三</text></view>
			<view class="line"></view>
			<view class="student_detail">手机号码<text class="star">*</text><text class="phone">请输入11位数字</text></view>
			<view class="line"></view>
			<view class="student_detail">性别<text class="star">*</text><text class="student_name">女＞</text></view>
			<view class="line"></view>
			<view class="student_detail">学号<text class="star">*</text><text class="phone">请输入学号</text></view>
			<view class="line"></view>
		</view>
		<button class="join">加入班级</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style>
	.div {
		width: 690rpx;
		height: 900rpx;
		margin: 34rpx 30rpx;
		box-shadow: 2rpx 2rpx 2rpx 2rpx #999999;
		background-color: #ffffff;
		border-radius: 10rpx;
	}

	.schoolImg {
		height: 130rpx;
		width: 130rpx;
		padding: 50rpx 280rpx 34rpx 280rpx;
	}

	.team_name {
		text-align: center;
		font-size: 30rpx;
		font-weight: 400rpx;
		margin-bottom: 100rpx;
	}

	.student_detail {
		color: #808080;
		font-size: 30rpx;
		padding-left: 30rpx;
		letter-spacing: 3rpx;
		margin: 40rpx 0 40rpx 0;
	}

	.star {
		color: red;
		margin-left: 15rpx;
		font-weight: bold;
	}

	.student_name {
		float: right;
		margin-right: 30rpx;
		letter-spacing: 3rpx;
		color: #333333;
	}

	.line {
		width: 92%;
		border-bottom: 1rpx solid #999999;
		margin: 19rpx 16rpx 0 20rpx;
	}

	.phone {
		float: right;
		margin-right: 30rpx;
		letter-spacing: 3rpx;
		font-size: 26rpx;
		color: #A4A3A6;
	}

	.sex {
		float: right;
		margin-right: 30rpx;
		letter-spacing: 3rpx;
		font-size: 26rpx;
		color: #000000;
	}

	.join {
		width: 600rpx;
		height: 80rpx;
		background-color: #007AFF;
		margin: 160rpx 75rpx 80rpx 75rpx;
		border-radius: 45rpx;
		font-size: 30rpx;
		letter-spacing: 3rpx;
		color: #ffffff;
		display: flex;
		flex-direction: column;
		justify-content: center;
		text-align: center;
	}
</style>
